/* --- mxn-layout Container ----------------------------------------------------------------------*/

@media (max-width: 1000px) {
    .mxn-layout.mxn-display-flex>* {
        flex: 1 1 100% !important;
    }
}

.mxn-layout {
    box-sizing: border-box;
    margin: var(--spc-normal) 0;
    padding: 0;
}

.mxn-index .mxn-layout {
    margin: 0;
}

/* The two primary layout modes, flex and block for the mxn-layout directive */
.mxn-layout.mxn-display-flex {
    display: flex;
    gap: var(--spc-small);
    flex-wrap: wrap;
    width: 100%;
}

.mxn-layout.mxn-display-block {
    display: block;
    width: 100%;
}

/* Selectors for flexbox configuration options of a mxn-layout container */

/* Flex direction */
.mxn-display-flex.mxn-direction-row {
    flex-direction: row;
}

.mxn-display-flex.mxn-direction-row-reverse {
    flex-direction: row-reverse;
}

.mxn-display-flex.mxn-direction-column {
    flex-direction: column;
}

.mxn-display-flex.mxn-direction-column-reverse {
    flex-direction: column-reverse;
}

/* Flex wrap */
.mxn-display-flex.mxn-nowrap {
    flex-wrap: nowrap;
}

/* Flex horizontal alignment */
.mxn-display-flex.mxn-justify-left {
    justify-content: flex-start;
}

.mxn-display-flex.mxn-justify-center {
    justify-content: center;
}

.mxn-display-flex.mxn-justify-right {
    justify-content: flex-end;
}

.mxn-display-flex.mxn-justify-stretch {
    justify-content: stretch;
}

/* Flex vertical alignment */
.mxn-display-flex.mxn-align-top {
    align-items: flex-start;
}

.mxn-display-flex.mxn-align-center {
    align-items: center;
}
.mxn-display-flex.mxn-align-bottom {
    align-items: flex-end;
}
.mxn-display-flex.mxn-align-stretch {
    align-items: stretch;
}

/* --- Card Container ----------------------------------------------------------------------------*/

:root {
    --col-fg-card: hsl(210, 10%, 96%);
    --col-fg-card-hover: hsl(210, 10%, 93%);
    --brd-card: var(--brd-solid-1px-dark) ;
    --brd-card-hover: var(--brd-solid-1px-dark-hover);
}

body[data-bs-theme="dark"] {
    --col-fg-card: hsl(0, 0%, 15%);
    --col-fg-card-hover: hsl(0, 0%, 17%);
    --brd-card: var(--brd-solid-1px-dark);
    --brd-card-hover: var(--brd-solid-1px-dark-hover) ;
}

/* Card component */
.mxn-card {
    background-color: var(--col-fg-card);
    border-radius: var(--brd-radius-normal);
    border: var(--brd-card);
    box-shadow: var(--shd-normal);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: var(--spc-normal) var(--spc-large);
    width: min-content;
}

.mxn-card:hover {
    border: var(--brd-card-hover);
    background-color: var(--col-fg-card-hover);
}

.mxn-card.mxn-image-left {
    flex-direction: row;
}

.mxn-card.mxn-image-right {
    flex-direction: row-reverse;
}

.mxn-card.mxn-image-top {
    flex-direction: column;
    align-items: center;
}

.mxn-card.mxn-image-bottom {
    flex-direction: column-reverse;
    align-items: center;
}

/* The image/icon inside a card */
.mxn-card .mxn-card-image {
    font-size: 36px;
    height: auto;
    width: auto;
    color: var(--col-fg-accent);
    margin: 0;
}

.mxn-card.mxn-image-left .mxn-card-image {
    margin-right: var(--spc-large);
}

.mxn-card.mxn-image-right .mxn-card-image {
    margin-left: var(--spc-large);
}

.mxn-card.mxn-image-top .mxn-card-image {
    margin-bottom: var(--spc-large);
}

.mxn-card.mxn-image-bottom .mxn-card-image {
    margin-top: var(--spc-large);
}

/* The container which holds all the content inside a card */
.mxn-card .mxn-card-content {
    margin: 0;
    padding: 0;
}

/* Title inside a card */
.mxn-card-content .mxn-card-title {
    margin-bottom: var(--spc-small);
    color: var(--col-fg-link);
}

/* Disable margins for a last child paragraph of a mxn-card-content container */
.mxn-card .mxn-card-content p:last-child {
    margin-bottom: 0;
}

/* --- Video Containers --------------------------------------------------------------------------*/

.videoWrapper {
    height: 0;
    margin-bottom: 25px;
    margin-top: 25px;
    padding-bottom: 56.25%; /* 16:9 */
    position: relative;
}

.videoWrapper iframe {
    border-radius: var(--brd-radius-normal);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}